<template>
    <!-- 会员管理 -->
    <div class="user" style="padding: 0px;">
        <el-card>
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户昵称">
                    <el-input v-model="searchForm.nickName" clearable @keyup.enter.native="onSubmit"
                        placeholder="关键字查询"></el-input>
                </el-form-item>
                <el-form-item label="下单途径">
                    <el-select style="width: 150px;" clearable v-model="searchForm.orderWay" filterable @change="onSubmit">
                        <el-option label="小程序购买" :value="1"></el-option>
                        <el-option label="后台赠送" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset" icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        
        <!--内容-->
        <el-card style="margin-top:5px;">
            <el-button @click="addClick" icon="Download">导出券包购买记录</el-button>
            <el-table size="small" :data="tableData" border style="width: 100%;margin-top:10px;" v-loading="loading" stripe>
                <!-- <el-table-column prop="id" fixed label="ID"></el-table-column> -->
                <!-- <el-table-column prop="userId" fixed label="用户标识" align="center"></el-table-column> -->
                <el-table-column prop="nickName" fixed label="用户昵称" align="center" width="120"></el-table-column>
                <el-table-column prop="realName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="mobile" min-width="130" label="电话" align="center"></el-table-column>
                <el-table-column prop="salesPersonName" label="专属客服"></el-table-column>
                <el-table-column prop="vipPackageName" label="券包名称" width="200"></el-table-column>
                <el-table-column prop="vipPackagePrice" label="券包价格" align="center"></el-table-column>
                <el-table-column prop="imagePath" width="150px" label="支付凭证">
                    <template #default="scope">
                        <img v-if="scope.row.payFilePath" :src="scope.row.payFilePath" style="width: 150px ; height:150px" />
                    </template>
                </el-table-column>
                <el-table-column prop="orderWay" label="下单途径" width="100">
                    <template #default="scope">
                        <el-tag>{{ scope.row.orderWay === 1 ? '小程序购买' : '后台赠送' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="payTypeText" label="支付方式" width="100" align="center">
                    <template #default="scope">
                        <el-tag>{{ scope.row.payTypeText }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="payStatusText" label="支付状态" width="100">
                    <template #default="scope">
                        <el-tag>{{ scope.row.payStatusText }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" min-width="100" label="状态" align="center">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.status == 10 ? 'danger' : scope.row.status == 20 ? 'info' : 'success'">
                            {{ scope.row.statusText }}
                        </el-tag>
                        <br>
                        <span v-if="scope.row.reason">拒绝原因:{{ scope.row.reason }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="下单时间" width="160" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button @click="viewClick(scope.row)" type="text" size="small" icon="View">查看</el-button>
                        <!-- payType=40并且status=20  -->
                        <el-button v-if="scope.row.payType == 40 && scope.row.status == 20" @click="rowOrderAudit(scope.row)" type="text" size="small" icon="Edit">审核</el-button>
                        <!-- payType=40并且status=10 -->
                        <el-button size="small" v-if="scope.row.status == 10 && scope.row.payType == 40" type="text" @click="uploadCredentials(scope.row)" v-loading="scope.row.rowLoading" icon="Upload">上传凭证</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <el-pagination style="margin-top:10px;margin-bottom:10px;float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
        </el-card>
        
        <!-- 审核 -->
        <!-- recordId:记录ID
			auditType:10-通过 20-拒绝
			auditDesc:"审核意见" -->
        <el-dialog title="" v-model="rowOrderAuditShow" width="30%" :before-close="handleClose">
            <div style="margin-bottom: 40px;">
                <div class="common-form mt16">审核</div>
                <p>
                    <span style="color: red;">*</span>审核意见:
                    <el-radio-group v-model="OrderAuditForm.auditType">
                        <el-radio :label="10" border>同意</el-radio>
                        <el-radio :label="20" border>拒绝</el-radio>
                    </el-radio-group>
                </p>
                <p v-if="OrderAuditForm.auditType === 20">
                    <span style="color: red;">*</span>拒绝原因:
                    <el-input style="width: 60%;" type="textarea" v-model="OrderAuditForm.auditDesc" />
                </p>
            </div>
            <div style="text-align: center;">
                <el-button type="primary" @click="rowOrderAuditSave()" v-loading="rowLoading">提交</el-button>
            </div>
        </el-dialog>
        <!--上传图片-->
        <Upload v-if="isupload" :isupload="isupload" :type="'image'" :config="{ total: 3 }" @returnImgs="returnImgsFunc"></Upload>
    </div>
</template>

<script>
import PackageApi from '@/api/package'
import OrderApi from "@/api/order.js";
import { defaultPageSize } from '@/utils/table.js'
import Upload from "@/components/file/Upload.vue";

export default {
    components: {
        Upload
    },
    data() {
        return {
            rowOrderAuditShow: false,
            OrderAuditForm: {},
            uploadCredentialsRow: {},
            isupload: false,
            rowOrderAuditRow: {},
            rowLoading: false,
            /*是否加载完成*/
            loading: false,
            /*列表数据*/
            tableData: [],
            /*一共多少条数据*/
            totalDataNumber: 0,
            searchForm: {
                pageIndex: 1,
                pageSize: 10,
                keyword: '',
                orderWay: '',
                nickName: '',
                pageSorts: []
            },
            leves: []
        };
    },
    created() {
        this.getTableList();

    },
    methods: {
        /*关闭选择图片*/
        returnImgsFunc(e) {
            console.log(e, 'eee')
            this.isupload = false;
            if (e != null && e.length > 0) {
                let image = e[0].filePath;
                let fileId = e[0].fileId;
                this.uploadCredentialsRow.rowLoading = true;
                OrderApi.vipPackageBuyConfirm({ recordId: this.uploadCredentialsRow.id, fileId: fileId }, true).then(res => {
                    const { code, data } = res;
                    if (code == 1) {
                        ElMessage({
                            message: '上传成功',
                            type: 'success'
                        });
                        this.getTableList()
                    }
                    this.uploadCredentialsRow.rowLoading = false;
                }).catch(e => { })
                this.uploadCredentialsRow.rowLoading = false;

            }
        },
        // 确认上传凭证
        uploadCredentials(row) {
            this.uploadCredentialsRow = row;
            this.isupload = true;
        },
        rowOrderAudit(row) {
            this.rowOrderAuditShow = true;
            this.rowOrderAuditRow = row;
        },
        // 付款记录审核
        rowOrderAuditSave() {
            if (!this.OrderAuditForm.auditType) {
                ElMessage.warning('请选择审核意见')
                return;
            }
            if (this.OrderAuditForm.auditType == 20 && !this.OrderAuditForm.auditDesc) {
                ElMessage.warning('请输入拒绝原因')
                return;
            }
            let Obj = {
                recordId: this.rowOrderAuditRow.id,
                auditType: this.OrderAuditForm.auditType,
                auditDesc: this.OrderAuditForm.auditDesc,
            }
            this.rowLoading = true
            OrderApi.vipPackageAudit(Obj).then(result => {
                this.rowLoading = false
                const { code, msg } = result
                if (code === 1) {
                    ElMessage.success(msg)
                    this.rowOrderAuditShow = false;
                    this.loadDetail(this.$route.query.id)
                } else {
                    ElMessage.error(msg)
                }
            }).catch(error => {
                this.rowLoading = false
            })
        },
        /*选择第几页*/
        handleCurrentChange(val) {
            let self = this;
            self.searchForm.pageIndex = val
            self.getTableList();
        },
        /*获取列表*/
        getTableList() {
            let self = this;
            self.loading = true
            const Params = self.searchForm;
            PackageApi.getCouponPackRecord(Params, true)
                .then((res) => {
                    self.loading = false;
                    const { code, data } = res
                    if (code === 1) {
                        const { total } = data
                        self.totalDataNumber = total
                        self.tableData = data.records
                    }
                    console.log('券包购买记录数据', res)
                })
                .catch((error) => {
                    self.loading = false;
                });
        },
        /*搜索查询*/
        onSubmit() {
            let self = this;
            self.searchForm.pageIndex = 1;
            self.getTableList();
        },
        onReset(){
            let self = this;
            self.searchForm.orderWay = null;
            self.searchForm.nickName = null;
            self.searchForm.pageIndex = 1;
            self.getTableList();
        },
        /*打开添加*/
        addClick(item) {
            PackageApi.exportRecord()
                .then(res => {
                    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
                    const url = window.URL.createObjectURL(blob)
                    const a = document.createElement('a')
                    a.href = url
                    const fdate = new Date()
                    const perx = `${fdate.getFullYear()}-${fdate.getMonth() + 1}-${fdate.getDate()}`
                    a.download = perx + '券包购买记录.xlsx'
                    a.click()
                    setTimeout(() => {
                        a.remove()
                    }, 1000)
                })
        },
        viewClick(item) {
            let params = item.id;
            this.$router.push({
                path: "/user/record/detail",
                query: {
                    id: params,
                },
            });
        },
        loadLevels() {
            const $this = this
            PackageApi.getAllGrade()
                .then(result => {
                    const { code, data } = result
                    if (code === 1) {
                        $this.leves = data
                    }
                })
        },
    },
};
</script>
<style></style>